<template>
  <div class="base-info-container">
    <!-- 左侧树形菜单 -->
    <div class="left-menu">
      <el-menu
        :default-active="activeMenu"
        class="el-menu-vertical"
        @select="handleMenuSelect"
      >
        <el-menu-item 
          v-for="(menu, index) in menus" 
          :key="index"
          :index="menu.path"
        >
          <i :class="menu.icon"></i>
          <span slot="title">{{ menu.name }}</span>
        </el-menu-item>
      </el-menu>
    </div>
    
    <!-- 右侧内容区域 -->
    <div class="right-content">
      <component :is="currentComponent" />
    </div>
  </div>
</template>

<script>
// 导入所有需要的组件
import ClinicSetting from '@/views/baseInfo/clinic.vue';
import MedicalProject from '@/views/baseInfo/medical.vue';
import DrugRate from '@/views/systemCatalogue/markUp/markUp.vue';
import InventorySetting from '@/views/baseInfo/inventory.vue';
import Insurance from '@/views/baseInfo/insurance.vue';
import FieldSetting from '@/views/baseInfo/field.vue';
import Security from '@/views/baseInfo/security.vue';
import OperationLog from '@/views/baseInfo/log.vue';
import System from '@/views/baseInfo/system.vue';
import Payment from '@/views/PayforMedicen/thirdpartyPayment.vue';
import ChronicDisease from '@/views/baseInfo/chronic.vue';
import SelfService from '@/views/baseInfo/kiosk.vue';
import ProductCenter from '@/views/baseInfo/product.vue';

export default {
  components: {
    ClinicSetting,
    MedicalProject,
    DrugRate,
    InventorySetting,
    Insurance,
    FieldSetting,
    Security,
    OperationLog,
    System,
    Payment,
    ChronicDisease,
    SelfService,
    ProductCenter
  },
  data() {
    return {
      activeMenu: '',
      currentComponent: null,
      menus: [
        { 
          name: '诊所设置', 
          path: '/baseInfo/clinic', 
          icon: 'el-icon-office-building',
          component: 'ClinicSetting'
        },
        { 
          name: '医疗项目', 
          path: '/baseInfo/medical', 
          icon: 'el-icon-first-aid-kit',
          component: 'MedicalProject'
        },
        { 
          name: '药品加成率', 
          path: '/systemCatalogue/markUp', 
          icon: 'el-icon-medal',
          component: 'DrugRate'
        },
        { 
          name: '库存设置', 
          path: '/baseInfo/inventory', 
          icon: 'el-icon-box',
          component: 'InventorySetting'
        },
        { 
          name: '医保相关', 
          path: '/baseInfo/insurance', 
          icon: 'el-icon-document',
          component: 'Insurance'
        },
        { 
          name: '字段设置', 
          path: '/baseInfo/field', 
          icon: 'el-icon-edit',
          component: 'FieldSetting'
        },
        { 
          name: '信息安全', 
          path: '/baseInfo/security', 
          icon: 'el-icon-lock',
          component: 'Security'
        },
        { 
          name: '操作日志', 
          path: '/baseInfo/log', 
          icon: 'el-icon-notebook-2',
          component: 'OperationLog'
        },
        { 
          name: '系统相关', 
          path: '/baseInfo/system', 
          icon: 'el-icon-setting',
          component: 'System'
        },
        { 
          name: '聚合支付', 
          path: '/PayforMedicen/thirdpartyPayment', 
          icon: 'el-icon-money',
          component: 'Payment'
        },
        { 
          name: '慢病管理', 
          path: '/baseInfo/chronic', 
          icon: 'el-icon-user',
          component: 'ChronicDisease'
        },
        { 
          name: '自助服务机', 
          path: '/baseInfo/kiosk', 
          icon: 'el-icon-monitor',
          component: 'SelfService'
        },
        { 
          name: '产品中心', 
          path: '/baseInfo/product', 
          icon: 'el-icon-goods',
          component: 'ProductCenter'
        }
      ]
    }
  },
  created() {
    // 初始化默认显示的组件
    this.activeMenu = this.menus[0].path;
    this.currentComponent = this.menus[0].component;
  },
  methods: {
    handleMenuSelect(path) {
      const selectedMenu = this.menus.find(menu => menu.path === path);
      if (selectedMenu) {
        this.activeMenu = path;
        this.currentComponent = selectedMenu.component;
      }
    }
  }
}
</script>

<style lang="less" scoped>
.base-info-container {
  display: flex;
  height: calc(100vh - 128px); /* 减去header高度(50px) + tags高度(40px) */
  overflow: hidden;
}

.left-menu {
  width: 220px;
  height: 100%;
  overflow-y: auto;
  // background-color: #fff;
  border-right: 1px solid #e6e6e6;
  flex-shrink: 0;
  
  .el-menu-item {
    font-size: 12px;
    height: 40px;
    line-height: 40px;
  }
}

.el-menu-vertical {
  border-right: none;
  height: 100%;
}

.right-content {
  flex: 1;
  padding: 0 8px;
  overflow: hidden; /* 改为hidden防止外层滚动 */
  // background-color: #f5f7fa;
  display: flex;
  
  & > * {
    width: 100%;
    height: 100%;
    overflow-y: auto; /* 内部组件可以滚动 */
  }
}
</style>